<template>
  <div class="video">
    <div class="list_left">
      <div class="item">
        <h3 @click="getAll">站点列表</h3>
        <ul class="listul">
          <li
            :class="selectId==v.id?'active':''"
            v-for="(v,i) in data.list"
            @click="getOne(v.id,v.cameraName)"
            :key="i"
          >{{v.cameraName}}</li>
        </ul>
      </div>
    </div>

    <div class="videoCenter">
      <div class="oneList" v-show="!isAll">
        <div style="width:100%;height:100%">
          <iframe
            frameborder="0"
            scrolling="no"
            :src="`https://open.ys7.com/ezopen/h5/iframe_se?url=${oneVideo.videoAddress}&accessToken=${oneVideo.accessToken}`"
            width="100%"
            height="100%"
            id="ysOpenDevice"
            allowfullscreen
          ></iframe>
        </div>
      </div>

      <div class="videoList" v-if="isAll">
        
        <div
          class="listItem"
          v-for="(item,index) in  data.list.slice(
            (data.currpage - 1) * data.pagesize,
            data.currpage * data.pagesize
          )"
          :key="index"
        >
          <iframe
            frameborder="0"
            scrolling="no"
            :src="item.endTime"
            width="100%"
            height="100%"
            id="ysOpenDevice"
            allowfullscreen
          ></iframe>
          <div class="btnBox" v-if="showId==item.id?!btnShow:btnShow">
            <div class="iicon" @click="closedBtns(item)">
              <img src="../../assets/png/closed.png" alt />
            </div>
            <div class="jujiao">
              <div class="yuanjiao" @click="changeVideo(11,item)">
                <img src="../../assets/png/yuanjiao.png" alt />
              </div>
              <div class="jinjiao" @click="changeVideo(10,item)">
                <img src="../../assets/png/jinjao.png" alt />
              </div>
            </div>
            <div class="yuan">
              <div class="shang" @click="changeVideo(0,item)">
                <img src="../../assets/png/shang.png" alt />
              </div>
              <div class="xia" @click="changeVideo(1,item)">
                <img src="../../assets/png/xia.png" alt />
              </div>
              <div class="zuo" @click="changeVideo(2,item)">
                <img src="../../assets/png/zuo.png" alt />
              </div>
              <div class="you" @click="changeVideo(3,item)">
                <img src="../../assets/png/you.png" alt />
              </div>
              <div class="zanting" @click="changeVideoStop(-1,item)">
                <img src="../../assets/png/zanting.png" alt />
              </div>
            </div>
            <div class="fangdasuoxiao">
              <div class="fangda" @click="changeVideo(8,item)">
                <img src="../../assets/png/fangda.png" alt />
              </div>
              <div class="suoxiao" @click="changeVideo(9,item)">
                <img src="../../assets/png/suoxiao.png" alt />
              </div>
            </div>
          </div>
          <div class="huchu" @click="getBtns(item)">
            <img src="../../assets/png/huchu.png" alt />
          </div>
          <!-- <div class="btns">
            <div class="jiugongge">
              <ul>
                <li data-index="0" class="hide" @click="changeVideo(4,item)">
                  <img src="../../assets/png/4.png" alt />
                </li>
                <li data-index="1" @click="changeVideo(0,item)">
                  <img src="../../assets/png/0.png" alt />
                </li>
                <li data-index="2" class="hide" @click="changeVideo(6,item)">
                  <img src="../../assets/png/6.png" alt />
                </li>
                <li data-index="3" @click="changeVideo(4,item)">
                  <img src="../../assets/png/2.png" alt />
                </li>
                <li data-index="4" @click="changeVideoStop(-1,item)">
                  <img src="../../assets/png/yuan.png" alt />
                </li>
                <li data-index="5" @click="changeVideo(3,item)">
                  <img src="../../assets/png/3.png" alt />
                </li>
                <li data-index="6" class="hide" @click="changeVideo(5,item)">
                  <img src="../../assets/png/5.png" alt />
                </li>
                <li data-index="7" @click="changeVideo(1,item)">
                  <img src="../../assets/png/a1.png" alt />
                </li>
                <li data-index="8" class="hide" @click="changeVideo(7,item)">
                  <img src="../../assets/png/7.png" alt />
                </li>
              </ul>
            </div>
          </div>
          <div class="fdsx">
            <div class="item" @click="changeVideo(8,item)">
              <img src="../../assets/png/8.png" alt />
            </div>
            <div class="item" @click="changeVideo(9,item)">
              <img src="../../assets/png/9.png" alt />
            </div>
            <div class="item" @click="changeVideo(10,item)">
              <img src="../../assets/png/10.png" alt />
            </div>
            <div class="item" @click="changeVideo(11,item)">
              <img src="../../assets/png/11.png" alt />
            </div>
          </div>-->
        </div>
      </div>

      <el-pagination
        v-if="isAll"
        background
        :current-page="data.currpage"
        :page-size="data.pagesize"
        layout="pager"
        :total="data.list.length"
        @prev-click="nextpage"
        @next-click="nextpage"
        @current-change="nextpage"
      ></el-pagination>
      <!-- <el-pagination background layout=" pager" :total="14"></el-pagination> -->
    </div>
  </div>
</template>
<script>
// import elementResizeDetectorMaker from "element-resize-detector"; //监听dom元素宽高变化的插件
// import survebtn from "./surveillancebtn";
export default {
  name: "PointVideos",
  // components: {
  //   survebtn
  // },
  data() {
    return {
      speed: 1,
      oneVideo:{},
      index: 0,
      btnShow:false,
      accessToken: "",
      deviceserial: "",
      selectId: "",
      isAll: true,
      showId: "",
      data: {
        pagesize: 4,
        currpage: 1,
        list: []
      },
      pointName:"",
      oneList: [],
      valiPage: [],
      valiList: [],
      waterEquipmentList: []
    };
  },
  created() {
    this.getVideo();
  },
  methods: {
    //视频切换
    getBtns(item) {
      console.log(item);
      this.showId = item.id;
      // this.btnShow = true;
    },
    closedBtns(item) {
      this.showId = "";
    },
    changeVideo(direction, item) {
      let accessToken = item.cameraAccessToken;
      let cameraNumber = item.cameraNumber;
      this.getVideoAbility(direction, accessToken, cameraNumber, 1);
    },
    // 视频停止
    changeVideoStop(speed, item) {
      let accessToken = item.cameraAccessToken;
      let cameraNumber = item.cameraNumber;
      this.getVideoAbility(0, accessToken, cameraNumber, -1);
    },
    // 视频数据流
    getVideoAbility(direction, accessToken, cameraNumber, speed) {
      this.$http
        .post("deviceCamera/changeLocation", {
          accessToken: accessToken,
          cameraNumber: cameraNumber,
          channelNumber: 1,
          direction: direction, //方向
          speed: speed //速度
        })
        .then(res => {
          // setTimeout(() => {
          //   let item = { accessToken, cameraNumber };
          //   this.changeVideoStop(speed, item);
          // }, 2000);
        });
    },
    //获取视频流

    getVideo() {
      this.$http
        .get("deviceCamera/findDeviceCameraByPonding")
        .then(res => {
          this.valiList = res.data;
          console.log(res.data,'222222')
          this.valiList.forEach(item => {
            item.indexId = item.id;
            this.accessToken = item.cameraAccessToken;
            this.deviceserial = item.cameraDeviceNumber;
            item.endTime = `https://open.ys7.com/ezopen/h5/iframe_se?url=${item.videoAddress}&accessToken=${item.accessToken}`;
          });
          this.data.list = this.valiList;
        });
    },

    getAll() {
      this.isAll = true;
      this.selectId = "";
      this.getVideo();
    },
    //视频切换
    getOne(stationId,cameraName) {
      this.selectId = stationId;
      this.pointName = cameraName;
      this.isAll = false;
      this.$http
        .get("deviceCamera/findByCameraName",  { params: { cameraName: this.pointName } })
        .then(res => {
          this.oneVideo = res.data;
        });
    },
    nextpage(value) {
      this.data.currpage = value;
    }
  }
};
</script>
<style lang="less" scoped>
.active {
  background-color: rgba(102, 156, 249, 0.4);
}
.video {
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  .list_left {
    width: 240px;
    height: 100%;
    .item {
      box-sizing: border-box;
      padding: 30px 0 20px 20px;
      h3 {
        height: 44px;
        text-align: left;
        cursor: pointer;
      }
      .listul{
        // height: 80%;
         height: 670px;
          overflow-y: auto;
      }
      ul > li {
        list-style: none;
        height: 44px;
        line-height: 44px;
        text-align: left;
        cursor: pointer;
        &:hover {
          background-color: #fff;
        }
      }
    }
  }
  .videoCenter {
    flex: 1;
    height: 100%;
    box-sizing: border-box;
    .videoList {
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      box-sizing: border-box;
      // background-color: aqua;
      justify-content: space-between;
      .listItem {
        width: 49%;
        height: 48%;
        position: relative;
        margin-left: 1%;
        margin-bottom: 1%;
        background: rgba(94, 94, 94, 1);
        .btnBox {
          position: absolute;
          top: 50%;
          right: 0;
          width: 150px;
          height: 80%;
          padding: 26px;
          background: rgba(5, 29, 70, 0.2);
          // opacity: 0.2;
          transform: translateY(-50%);
          border-radius: 8px;
          .iicon {
            position: absolute;
            width: 26px;
            height: 26px;
            top: 0;
            left: 0;
            cursor: pointer;
            img {
              width: 100%;
            }
          }
          .jujiao {
            width: 150px;
            height: 60px;
            margin-top: 8px;
            // background-color: aquamarine;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .yuanjiao {
              width: 30px;
              height: 30px;
              cursor: pointer;
              img {
                width: 100%;
              }
            }
            .jinjiao {
              width: 30px;
              height: 30px;
              cursor: pointer;
              img {
                width: 100%;
              }
            }
          }
          .yuan {
            width: 140px;
            height: 140px;
            background: url("../../assets/png/dayuan.png") center no-repeat;
            background-size: cover;
            position: relative;
            .zanting {
              position: absolute;
              width: 49px;
              height: 49px;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              cursor: pointer;
              img {
                width: 100%;
              }
            }
            .shang {
              position: absolute;
              cursor: pointer;
              width: 18px;
              height: 18px;
              top: 10px;
              left: 50%;
              transform: translate(-50%, 0);
              img {
                width: 100%;
              }
            }
            .xia {
              position: absolute;
              cursor: pointer;
              width: 18px;
              height: 18px;
              bottom: 10px;
              left: 50%;
              transform: translate(-50%, 0);
              img {
                width: 100%;
              }
            }
            .zuo {
              position: absolute;
              cursor: pointer;
              width: 18px;
              height: 18px;
              top: 50%;
              left: 10px;
              transform: translate(0, -50%);
              img {
                width: 100%;
              }
            }
            .you {
              position: absolute;
              cursor: pointer;
              width: 18px;
              height: 18px;
              top: 50%;
              right: 10px;
              transform: translate(0, -50%);
              img {
                width: 100%;
              }
            }
          }
          .fangdasuoxiao {
            width: 150px;
            height: 60px;
            // background-color: rgb(73, 207, 248);
            display: flex;
            justify-content: space-between;
            align-items: center;
            .fangda {
              width: 30px;
              height: 30px;
              cursor: pointer;
              img {
                width: 30px;
                height: 30px;
              }
            }
            .suoxiao {
              width: 30px;
              height: 30px;
              cursor: pointer;
              img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }
        .huchu {
          position: absolute;
          width: 20px;
          height: 20px;
          // background-color: #444;
          bottom: 15px;
          left: 10px;
          cursor: pointer;
          img {
            width: 100%;
          }
        }
        // .btns {
        //   position: absolute;
        //   width: 90px;
        //   height: 90px;
        //   background-color: #444;
        //   bottom: 0;
        //   left: 0;
        //   .jiugongge {
        //     ul {
        //       display: flex;
        //       box-sizing: border-box;
        //       flex-wrap: wrap;
        //       align-items: center;
        //       li {
        //         width: 30px;
        //         height: 30px;
        //         cursor: pointer;
        //         list-style: none;
        //         display: flex;
        //         justify-content: center;
        //         align-items: center;
        //         img {
        //           height: 20px;
        //           width: 20px;
        //         }
        //       }
        //       .hide {
        //         opacity: 0;
        //       }
        //     }
        //   }
        // }
        // .fdsx {
        //   position: absolute;
        //   display: flex;
        //   width: 200px;
        //   height: 30px;
        //   bottom: 10px;
        //   cursor: pointer;
        //   left: 90px;
        //   .item {
        //     width: 30px;
        //     height: 30px;
        //     margin: 0 10px;
        //     img {
        //       width: 100%;
        //       height: 100%;
        //     }
        //   }
        // }
      }
    }
    .oneList {
      width: 100%;
      height: 100%;
      background-color: #333;
    }
  }
  .videoLeft,
  .videoRight {
    width: 285px;
    height: 100%;
    background-color: #ccc;
  }
  .water_equipment {
    width: 100%;
    .equipment_item {
      width: 100%;
      height: 68px;
      padding: 10px;
      background-color: #fff;
      cursor: pointer;
      &:hover {
        background-color: rgb(152, 152, 243);
      }
    }
  }
}
</style>

